<template>
  <div class="allLogin">
    <div class="LoginSelf">
      <img src="../assets/Pumas_logo.png" alt="" />
    </div>

    <div>
      <!-- 登入表 -->
      <loginform v-if="!trance" class="loginform" />
      <!-- 注册表 -->
      <register v-else class="loginform"/>
    </div>
  </div>
</template>

<script>
import loginform from "../components/loginForm.vue";
import register from "../components/registerForm.vue"
import { useStore } from "vuex";
import {computed} from 'vue'

export default {
  components: {
    loginform,
    register,
  },
  setup() {
    // 取vuex里的值
    const vuexdata = useStore();
    const trance = computed(() => {
      return vuexdata.state.trance
    });

    return {trance}
  },
};
</script>

<style >
.allLogin {
  background-image: url("../assets/网格.png");
}
.loginform {
  margin-top: 40px;
}
.LoginSelf {
  /* background-image: url("../assets/宇航员.png") ;
  background-repeat: no-repeat;
  background-size: cover; */

  -webkit-animation: kenburns-top 5s ease-out both;
  animation: kenburns-top 5s ease-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-2-15 1:0:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
</style>


